<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <meta http-equiv="Content-Language"    content="en" />
   <meta http-equiv="Content-Script-Type" content="text/javascript" />
   <meta http-equiv="Content-Type"        content="text/html;charset=UTF-8" />

   <title>..::[  Ajile - Examples  ]::..</title>

   <meta name="Description" content="Overview :: Ajile - Advanced JavaScript Importing &amp; Loading Extension" />
   <meta name="Keywords"    content="Ajile,AJILE,JavaScript inject,JavaScript include,JavaScript Namespace,JavaScript Namespacing,Javascript Import,JavaScript On-Demand,JavaScript Package,JavaScript Packaging,Unobtrusive JavaScript,namespace,package,import,include,use,require,ajax,JSPackaging,JSLoad,JSPackage,JSImport" />
   <meta name="copyright"   content="Copyright &copy; 2003-2008 Michael A. I. Lee, http://ajile.iSkitz.com/" />

   <link type="image/ico" rel="icon"          href="http://ajile.sourceforge.net/favicon.ico" />
   <link type="image/ico" rel="shortcut icon" href="http://ajile.sourceforge.net/favicon.ico" />
   <link type="text/css"  rel="stylesheet"    href="Examples.css" />
   <link type="text/css"  rel="stylesheet"    href="../lib/highlight/dp.sh.1.5.1.css" />
</head>
<body id="examples">

   <div class="section">
   The source code for these examples is available in the examples/scripts
   directory of the downloadable archive.
   </div>

   <div class="section">
   <a name="Namespace" href="#Namespace" class="titleBar">.: Creating a Namespace :.</a>
   <p>This example shows how to use Ajile's
   <a href="../docs/api/Directives.htm#Namespace">Namespace</a> directive to
   create a namespace. Click this section's title to test it.</p>
   <pre class="js">
   Namespace ("com.iskitz.ajile.examples");
   
   var msg = typeof com.iskitz.ajile.examples == "undefined"
           ? "Failed to create"
           : "Successfully created";
   
   alert(msg + " the [ com.iskitz.ajile.examples ] namespace!");
   </pre>
   </div>

   <div class="section">
   <a name="Load" href="#Load" class="titleBar">.: Loading JavaScript :.</a>
   <p>This example shows how to use Ajile's
   <a href="../docs/api/Directives.htm#Load">Load</a> directive to load
   an external JavaScript file. Click this section's title to test it.</p>
   <pre class="js">
   Load ("scripts/com.iskitz.ajile.examples.LoadExample.js");

   function testLoad()
   {
      if(  "undefined" != typeof com.iskitz.ajile.examples
        &amp;&amp; "undefined" != typeof com.iskitz.ajile.examples.LoadExample)
            com.iskitz.ajile.examples.LoadExample();

      else alert( "Load test was unsuccessful :-(\n\n"
                + "Failed to Load [ com.iskitz.ajile.examples.LoadExample.js ]");
   }

   /** LoadExample.js: *******************************************************/

   Namespace("com.iskitz.ajile.examples");

   com.iskitz.ajile.examples.LoadExample = function()
   {
      var msg = navigator.userAgent + "\n\n\t\t"
              + "Successfully Loaded [ com.iskitz.ajile.examples.LoadExample ]!";
      
      alert(msg);
   };
   </pre>
   </div>

   <div class="section">
   <a name="Include" href="#Include" class="titleBar">.: Include Example :.</a>
   <p>This example uses Ajile's
   <a href="../docs/api/Directives.htm#Include">Include</a> directive to include
   an externally defined function. When successful, the included function is
   executed and a success message is displayed. If unsuccessful a failure
   message will be shown. Click this section's title to test it.</p>
   <pre class="js">
   Include ("com.iskitz.ajile.examples.IncludeExample");

   function testInclude()
   {
      if("undefined" != typeof com.iskitz.ajile.examples)
         if("undefined" != typeof com.iskitz.ajile.examples.IncludeExample)
            com.iskitz.ajile.examples.IncludeExample();

         else alert( "Include test was unsuccessful :-(\n\n"
                   + "Failed to Include [ com.iskitz.ajile.examples.IncludeExample.js ]");
   }

   /** InludeExample.js: **********************************************************/

   Namespace ("com.iskitz.ajile.examples");

   com.iskitz.ajile.examples.IncludeExample = function()
   {
      var wasImported = typeof window["IncludeExample"] != "undefined";
   
      alert( "[ com.iskitz.ajile.examples.IncludeExample ] was "
           + (wasImported ? "Included *and* Imported." : "successfully Included!"));
   };
   </pre>
   </div>

   <div class="section">
   <a name="Import" href="#Import" class="titleBar">.: Importing a Module :.</a>
   <p>This example uses the
   <a href="../docs/api/Directives.htm#Import">Import</a> directive to import a
   function module so that it can be executed using its short name. Click this 
   section's title to test it.</p>
   <pre class="js">
   Import ("com.iskitz.ajile.examples.ImportFunction");

   function testImport()
   {
      if("undefined" != typeof ImportFunction)
         ImportFunction();

      else alert( "Import test was unsuccessful :-(\n\n"
                + "Failed to Import [ com.iskitz.ajile.examples.ImportFunction ]");
   }

   /** ImportFunction.js: *******************************/

   Namespace ("com.iskitz.ajile.examples");

   com.iskitz.ajile.examples.ImportFunction = function ()
   {
      alert("ImportFunction was successfully imported!");
   };
   </pre>
   </div>

   <div class="section">
   <a name="ImportListener" href="#ImportListener" class="titleBar">.: Using an Import Listener :.</a>
   <p>This example uses Ajile's
   <a href="../docs/api/Functions.htm#AddImportListener">Import Listener</a>
   feature to determine if all of this page's modules have been successfully
   imported. Click this section's title to test it.</p>
   <pre class="js">
   // ImportListener that triggers the Examples page's initialization once all
   // required modules are ready for use.
   function isPageReady(moduleName)
   {
      if(  "undefined" == typeof AComplex
        || "undefined" == typeof Complex
        || "undefined" == typeof ImportFunction
        || "undefined" == typeof showContents
        || "undefined" == typeof com.iskitz.ajile.examples.LoadExample)
         return;

      Ajile.RemoveImportListener(isPageReady);
      isPageReady = true;
      initialize();
   }

   // Add listener to observe any import/include events.
   Ajile.AddImportListener(isPageReady);

   // Tests whether all imports were successful.
   function testImportListener()
   {
      var status = isPageReady == true ? ' ' : " NOT ";

      alert( "Import Listener test was" + status +"successful!\n\n"
           + "All required modules have"+ status +"been imported.");
   }
   </pre>
   </div>

   <div class="section">
   <a name="ImportModule" href="#ImportModule" class="titleBar">.: Using a Wildcard Import :.</a>
   <p>This example imports a module's public members so that each can be easily
   accessed using their short names instead of their fully qualified namespaces.
   Click this section's title to test it.</p>
   <pre class="js">
   Import ("com.iskitz.ajile.examples.ImportModule.*");

   function testImportModule()
   {
      // Test if showContents method has been imported.
      var imported = "undefined" != typeof showContents;

      if(imported)// Test if imported showContents is ImportModule.showContents.
         if("undefined" != typeof com.iskitz.ajile.examples.ImportModule)
            if(showContents == com.iskitz.ajile.examples.ImportModule.showContents)
               imported = true;
      
      if(imported) showContents();

      else alert( "ImportModule test was unsuccessful :-(\n\n Failed to "
                + "Import [ com.iskitz.ajile.examples.ImportModule.* ]");
   }
   
   /** ImportModule.js: *******************************************************/
   
   Namespace ("com.iskitz.ajile.examples.ImportModule");
   
   com.iskitz.ajile.examples.ImportModule = function()
   {
      var THIS = this;
   
      // Constructor :: Creates public members.
      function $ImportModule()
      {
         this.aNumber            = 1;
         this.aString            = "member 5";
         this.aFunction          = function(){ alert("member 1"); };
         this.anArray            = ["member3"];
         this.anObject           = { member:"member 2" };
         this.aRegularExpression = (/member 6/);
         this.showContents       = showContents;
      }
      
      function showContents()
      {
         var contents = ".:{ com.iskitz.ajile.examples.ImportModule }:.\n\n";
         
         alert(contents + (THIS.constructor.toString ? THIS.constructor : ''));
      }
      
      $ImportModule();
   };
   </pre>
   </div>

   <div class="section">
   <a name="Dependence" href="#Dependence" class="titleBar">.: Defining Dependencies :.</a>
   <p>This example shows how to use Ajile to define dependencies. Here we
   import one externally defined module from within another then instantiate
   and use the imported module. Click this section's title to test it.</p>
   <pre class="js">
   Import ("com.iskitz.ajile.examples.Complex");

   function testDependence()
   {
      if("undefined" != typeof Complex)
      {
         var complex = new Complex();
         complex.sayHello();
      }
      else alert( "Dependency test was unsuccessful :-(\n\n"
                + "Failed to Import [ com.iskitz.ajile.examples.Complex ]");
   }

   /** Simple.js: **************************************************/
   
   Namespace ("com.iskitz.ajile.examples");

   com.iskitz.ajile.examples.Simple = function()
   {
      this.toString = function toString()
      {
         return "[Simple]";
      };
   };

   /** Complex.js: *************************************************/
   
   Namespace ("com.iskitz.ajile.examples");

   Import ("com.iskitz.ajile.examples.Simple");

   com.iskitz.ajile.examples.Complex = function()
   {
      var simple = new Simple();

      this.sayHello = function sayHello()
      {
         var message = "Hello World!\n\nThis is a " + this.toString()
                     + " object that imported and is\nusing a "
                     + simple.toString() + " object!";

         alert(message);
      };

      this.toString = function toString()
      {
         return "[Complex]";
      };
   };
   </pre>
   </div>

   <div class="section">
   <a name="ImportAlias" href="#ImportAlias" class="titleBar">.: Handling Name Conflicts :.</a>
   <p>This example uses Ajile's
   <a href="../docs/api/Directives.htm#ImportAs">ImportAs</a> directive to 
   import two externally defined modules that use the same short name,
   "Complex". Each module also defines a dependency for the Simple module. Click
   this section's title to test it.</p>
   <pre class="js">
   Import   ("com.iskitz.ajile.examples.ambiguity.Complex");
   ImportAs ("AComplex", "com.iskitz.ajile.examples.ambiguity.Complex");

   function testImportAlias()
   {
      if("undefined" != typeof Complex &amp;&amp; "undefined" != typeof AComplex)
      {
         (new Complex() ).sayHello();  // Create &amp; use Complex object.
         (new AComplex()).sayHello();  // Create &amp; use ambiguous Complex object.
      }
      else alert( "Ambiguity test was unsuccessful :-(\n\n"
                + "Failed to import both [ com.iskitz.ajile.examples.Complex ]\n"
                + "and [ com.iskitz.ajile.examples.ambiguous.Complex ]");
   }

   /* Ambiguous Complex.js:  See Simple.js and the original Complex.js above. */
   
   Namespace ("com.iskitz.ajile.examples.ambiguous");
   Import    ("com.iskitz.ajile.examples.Simple");

   com.iskitz.ajile.examples.ambiguous.Complex = function()
   {
      var simple = new Simple();

      this.sayHello = function sayHello()
      {
         var message = "Hello World!\n\nThis is an " + this.toString()
                     + " object that\nimported and is using a "
                     + simple.toString() + " object!";

         alert(message);
      };

      this.toString = function toString()
      {
         return "[ambiguous.Complex]";
      };
   };
   </pre>
   </div>

   <div class="section">
   The source code for these examples is available in the examples/scripts
   directory of the downloadable archive.
   </div>

   <p><a id="lnkSFLogo" href="http://sourceforge.net/projects/ajile/"><img src="http://sflogo.sourceforge.net/sflogo.php?group_id=149163&amp;type=1" alt="SourceForge.net Logo" title="Ajile @ SourceForge" /></a></p>
   <script type="text/javascript" src="../lib/ajile/com.iskitz.ajile.js">
   /*<!--
   Try replacing this script tag's src attribute with the following:

   src="../lib/com.iskitz.ajile.js?cloak,debug,legacy,mvc,mvcshare,override,refresh"

   Doing so will instruct Ajile to load with all load-time options by enabled.
   To disable any option, append "off" to the option's name (i.e. debugoff).
   -->*/
   </script>
</body>
</html>